<template>
  <div class="data-type-form-container">
    <el-form ref="form" :model="form" label-position="top" style="max-width: 450px; min-width: 420px">
      <!-- 下拉更换数据类型 -->
      <el-form-item>
        <el-select v-model="form.type" style="width: 100%" :class="[form.type ? form.type + '-text' : '']"
          @change="handleChangeDataType">
          <el-option-group v-for="group in typeOptions" :key="group.label" :label="group.label">
            <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-option-group>
        </el-select>
      </el-form-item>
      <!-- 必需/允许NULL/废弃 -->
      <el-form-item>
        <el-row :gutter="10" style="width: 100%; font-size: 12px">
          <el-col :span="5" v-if="currentIndex != 1">
            必需<el-switch v-model="form.required" style="margin-left: 5px" :width="35" active-color="#409EFF"
              inactive-color="#c6c8cc">
            </el-switch>
          </el-col>
          <el-col :span="7">
            允许NULL<el-switch v-model="form.null_able" style="margin-left: 5px" :width="35"
              :disabled="currentSchema.type == 'any'" active-color="#409EFF" inactive-color="#c6c8cc">
            </el-switch>
          </el-col>
          <el-col :span="6">
            废弃<el-switch v-model="form.deprecated" style="margin-left: 5px" :width="35" active-color="#409EFF"
              inactive-color="#c6c8cc">
            </el-switch>
          </el-col>
        </el-row>
      </el-form-item>
      <div class="hr-color"></div>
      <template v-if="form.type === 'string'">
        <el-form-item>
          <el-row :gutter="10" style="width: 100%; font-size: 12px">
            <el-col :span="6">
              枚举<el-switch v-model="form.isEnum" style="margin-left: 5px" :width="35" active-color="#409EFF"
                inactive-color="#c6c8cc" @change="handleChangeEnum">
              </el-switch>
            </el-col>
            <el-col :span="18" style="display: flex; align-items: center">
              常量<el-switch v-model="form.isConst" style="margin-left: 5px" :width="35" active-color="#409EFF"
                inactive-color="#c6c8cc" @change="handleChangeConst">
              </el-switch>
              <el-input v-if="form.isConst" v-model="form.const" placeholder="常量值"
                style="width: 75%; margin-left: 5px"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item v-if="form.isEnum" label="">
          <el-table class="enum-table" :data="form.enum" border :cell-style="{ height: '26px' }" style="width: 100%">
            <el-table-column label="" width="35">
              <template slot-scope="scope">
                <img v-if="scope.$index != form.enum.length - 1" src="/images/sort.svg" alt=""
                  style="width: 20px; height: 20px; cursor: move" />
              </template>
            </el-table-column>
            <el-table-column prop="value" label="枚举值">
              <template slot-scope="scope">
                <el-input class="enum-input" v-model="scope.row.value" placeholder="枚举值"
                  @input="addEnumRow(scope.$index, scope.row)"></el-input>
                <img slot="reference" v-if="jsonSchemaTool.isEmptyValue(scope.row.value)" src="/images/error.svg" alt=""
                  title="不能为空" style="width: 12px; height: 12px; cursor: pointer" />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称">
              <template slot-scope="scope">
                <el-input class="enum-input" v-model="scope.row.name" placeholder="名称"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="说明">
              <template slot-scope="scope">
                <el-input class="enum-input" v-model="scope.row.description" placeholder="说明"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="" width="50">
              <template slot-scope="scope">
                <img v-if="scope.$index != form.enum.length - 1" src="/images/node-delete.svg" alt="" title="删除"
                  style="width: 15px; height: 15px; cursor: pointer" @click="deleteEnumRow(scope.$index, scope.row)" />
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-row :gutter="10" style="width: 100%; font-size: 12px">
          <el-col :span="12">
            <el-form-item label="format">
              <el-popover ref="formatRef" popper-class="common-popover scroll-popover" placement="bottom" title=""
                trigger="click" :visible-arrow="false">
                <div class="menu-item" v-for="item in format_options.string_format_options" :key="item.value"
                  @click="handleFormatClick(item)">
                  <div class="menu-item-text">{{ item.label }}</div>
                </div>

                <el-input slot="reference" v-model="form.format" placeholder="" style="width: 100%"></el-input>
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行为">
              <el-select v-model="form.behavior" style="width: 100%">
                <el-option v-for="item in list5" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" style="width: 100%; font-size: 12px">
          <el-col :span="12">
            <el-form-item label="最小长度">
              <el-input type="number" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" v-model.number="form.minLength"
                placeholder="> = 0" style="width: 100%" @change="handleChange($event, 'minLength')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大长度">
              <el-input type="number" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" v-model.number="form.maxLength"
                placeholder="> = 0" style="width: 100%" @change="handleChange($event, 'maxLength')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" style="width: 100%; font-size: 12px">
          <el-col :span="12">
            <el-form-item label="默认值">
              <el-input v-model="form.default" placeholder="默认值" style="width: 100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="pattern">
              <el-input v-model="form.pattern" placeholder="^[A-Za-z0-9-_]+" style="width: 100%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="示例值">
          <el-input v-model="form.examples" placeholder="示例值" style="width: 100%"></el-input>
        </el-form-item>
      </template>
      <template v-else-if="form.type === 'integer' || form.type === 'number'">
        <el-form-item>
          <el-row :gutter="10" style="width: 100%; font-size: 12px">
            <el-col :span="6">
              枚举<el-switch v-model="form.isEnum" style="margin-left: 5px" :width="35" active-color="#409EFF"
                inactive-color="#c6c8cc" @change="handleChangeEnum">
              </el-switch>
            </el-col>
            <el-col :span="18" style="display: flex; align-items: center">
              常量<el-switch v-model="form.isConst" style="margin-left: 5px" :width="35" active-color="#409EFF"
                inactive-color="#c6c8cc" @change="handleChangeConst">
              </el-switch>
              <el-input v-if="form.isConst" v-model.number="form.const" placeholder="常量值"
                style="width: 75%; margin-left: 5px" @change="handleChange($event, 'const')"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item v-if="form.isEnum" label="">
          <el-table class="enum-table" :data="form.enum" border :cell-style="{ height: '26px' }" style="width: 100%">
            <el-table-column label="" width="35">
              <template slot-scope="scope">
                <img v-if="scope.$index != form.enum.length - 1" src="/images/sort.svg" alt=""
                  style="width: 20px; height: 20px; cursor: move" />
              </template>
            </el-table-column>
            <el-table-column prop="value" label="枚举值">
              <template slot-scope="scope">
                <el-input class="enum-input" v-model.number="scope.row.value" style="width: 100%" placeholder="枚举值"
                  @input="addEnumRow(scope.$index, scope.row)"></el-input>
                <img slot="reference" v-if="scope.row.value != 0 && scope.row.value == ''" src="/images/error.svg"
                  alt="" title="不能为空" style="width: 12px; height: 12px; cursor: pointer" />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称">
              <template slot-scope="scope">
                <el-input class="enum-input" v-model="scope.row.name" placeholder="名称"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="说明">
              <template slot-scope="scope">
                <el-input class="enum-input" v-model="scope.row.description" placeholder="说明"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="" width="50">
              <template slot-scope="scope">
                <img v-if="scope.$index != form.enum.length - 1" src="/images/node-delete.svg" alt="" title="删除"
                  style="width: 15px; height: 15px; cursor: pointer" @click="deleteEnumRow(scope.$index, scope.row)" />
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-row :gutter="10" style="width: 100%; font-size: 12px">
          <el-col :span="12">
            <el-form-item label="format">
              <el-popover ref="formatRef" popper-class="common-popover scroll-popover" placement="right" title=""
                trigger="click" :visible-arrow="false">
                <div class="menu-item" v-for="item in form.type === 'integer'
                  ? format_options.integer_format_options
                  : format_options.number_format_options" :key="item.value" @click="handleFormatClick(item)">
                  <div class="menu-item-text">{{ item.label }}</div>
                </div>

                <el-input slot="reference" v-model="form.format" placeholder="" clearable
                  style="width: 100%"></el-input>
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行为">
              <el-select v-model="form.behavior" style="width: 100%">
                <el-option v-for="item in list5" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="默认值">
          <el-input v-model.number="form.default" style="width: 100%" placeholder="默认值"
            @change="handleChange($event, 'default')"></el-input>
        </el-form-item>
        <el-form-item label="示例值">
          <el-input v-model.number="form.examples" style="width: 100%" placeholder="示例值"
            @change="handleChange($event, 'examples')"></el-input>
        </el-form-item>
        <el-row :gutter="10" style="width: 100%; font-size: 12px">
          <el-col :span="8">
            <el-form-item label="最小值">
              <el-input v-model.number="form.minimum" placeholder="> = 0" style="width: 100%"
                @change="handleChange($event, 'minimum')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="最大值">
              <el-input v-model.number="form.maximum" placeholder="> = 0" style="width: 100%"
                @change="handleChange($event, 'maximum')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="倍数">
              <el-input v-model.number="form.multipleOf" placeholder="> = 0" style="width: 100%"
                @change="handleChange($event, 'multipleOf')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" style="width: 100%; font-size: 12px">
          <el-col :span="8"><el-radio v-if="!form.minimum == false" v-model="form.equal_to_minimum"
              label="1">不可等于最小值</el-radio></el-col>
          <el-col :span="8"><el-radio v-if="!form.maximum == false" v-model="form.equal_to_maximum"
              label="1">不可等于最大值</el-radio></el-col>
        </el-row>
      </template>
      <template v-else-if="form.type === 'boolean'">
        <el-row :gutter="10" style="width: 100%; font-size: 12px">
          <el-col :span="12">
            <el-form-item label="默认值">
              <el-select v-model="form.default" style="width: 100%">
                <el-option v-for="item in [
                  { label: 'true', value: true },
                  { label: 'false', value: false },
                ]" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行为">
              <el-select v-model="form.behavior" style="width: 100%">
                <el-option v-for="item in list5" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <template v-else-if="form.type === 'array'">
        <el-row :gutter="10" style="width: 100%; font-size: 12px">
          <el-col :span="12">
            <el-form-item label="最小元素个数">
              <el-input type="number" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" v-model.number="form.minItems"
                placeholder="> = 0" style="width: 100%" @change="handleChange($event, 'minItems')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大元素个数">
              <el-input type="number" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" v-model.number="form.maxItems"
                placeholder="> = 0" style="width: 100%" @change="handleChange($event, 'maxItems')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" style="width: 100%; font-size: 12px">
          <el-col :span="12">
            <el-form-item label="所有元素必须唯一">
              <el-switch v-model="form.uniqueItems" style="margin-left: 5px" :width="35" active-color="#409EFF"
                inactive-color="#c6c8cc">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行为">
              <el-select v-model="form.behavior" style="width: 100%">
                <el-option v-for="item in list5" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <template v-else-if="form.type === 'object'">
        <el-row :gutter="10" style="width: 100%; font-size: 12px">
          <el-col :span="12">
            <el-form-item label="最小属性数量">
              <el-input type="number" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                v-model.number="form.minProperties" placeholder="> = 0" style="width: 100%"
                @change="handleChange($event, 'minProperties')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大属性数量">
              <el-input type="number" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                v-model.number="form.maxProperties" placeholder="> = 0" style="width: 100%"
                @change="handleChange($event, 'maxProperties')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" style="width: 100%; font-size: 12px">
          <el-col :span="12">
            <el-form-item label="行为">
              <el-select v-model="form.behavior" style="width: 100%">
                <el-option v-for="item in list5" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <template v-else-if="form.type === 'quote'">
        <ReferenceDialogAdvanced ref="referenceRef" :modelDataList="treeData" :isGlobalModule="isGlobalModule"
          @addReferenceModel="addReferenceModel"></ReferenceDialogAdvanced>
      </template>
    </el-form>
  </div>
</template>

<script>
import { mapState } from "vuex";
import jsonSchemaToolHandle from "@/utils/jsonSchema-tool.js";
import ReferenceDialogAdvanced from "./reference-dialog-advanced.vue";
export default {
  name: "DataTypeForm",
  data() {
    return {
      jsonSchemaTool: null,
      currentNodeKey: null, // 当前节点的key
      filterText: null,
      isQuote: false, // 判断是否是点击数据类型，将其修改为引用类型
      format_options: {}, // format的格式列表
      treeList: [], // 引用模型列表
      form: {
        type: "quote",
        required: false,
        null_able: false,
        deprecated: false, // 废弃
      },
      defaultProps: {
        children: "children",
        label: "name",
        value: "id",
      },
      // ready:false,//是否加载树
      modelInfo: {}, //模型信息
      mainVersionInfo: {}, //模型主版本信息
    };
  },
  props: {
    popoverRef: {
      type: String,
    },
    formRef: {
      type: String,
    },
    parentSchema: {
      type: Object,
    },
    currentSchema: {
      type: Object,
    },
    currentName: {
      type: String,
    },
    currentIndex: {
      type: Number,
    },
    isArrayItems: {
      type: String,
    },
    treeData: {
      type: Array,
    },
    globalTreeData: {
      type: Array,
    },
    isGlobalModule: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    ReferenceDialogAdvanced,
  },
  computed: {
    ...mapState({
      list4: (state) => state.model_scenario.menu_list.list4,
      list5: (state) => state.model_scenario.menu_list.list5,
      // treeData: (state) => state.schemaTree.schemaTreeList,
    }),
    typeOptions() {
      return this.isArrayItems == "key"
        ? [
          {
            label: "基础类型",
            options: this.list4[1].options.filter((item) =>
              ["string", "integer"].includes(item.value)
            ),
          },
        ]
        : this.list4;
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.jsonSchemaTool = new jsonSchemaToolHandle(this);
    // if (localStorage.getItem("model-manage_selectedNodeInfo")) {
    //   this.modelInfo = JSON.parse(localStorage.getItem("model-manage_selectedNodeInfo"));
    //   if (localStorage.getItem("mainVersionInfo")) {
    //     this.mainVersionInfo = JSON.parse(
    //       localStorage.getItem("mainVersionInfo")
    //     );
    //     this.getModelDataTree();
    //   }
    // }
  },
  methods: {
    // getModelDataTree() {
    //   this.ready = false
    //   getModelDataTree({
    //     modelId: this.modelInfo.modelId,
    //     mainVersion: this.mainVersionInfo.mainVersionId,
    //   }).then((response) => {
    //     if (response.code == 200) {
    //       if (Array.isArray(response.data)) {
    //         this.treeData = response.data[0].commonTreeList;
    //         this.ready = true
    //       }
    //     }
    //   });
    // },
    init() {
      this.currentNodeKey = null;
      this.treeList = this.$store.getters.data_model_tree_data;
      this.format_options = this.$store.getters.format_options;
      this.initForm();
      if (this.jsonSchemaTool.isComplexType(this.currentSchema, 2)) {
        // 当前节点的类型为引用
        this.currentNodeKey = `apiSchema.${this.currentSchema["$ref"]
          .split("/")
          .pop()}`;
        // this.$nextTick(() => {
        //   this.$refs["tree"].setCurrentKey(this.currentNodeKey);
        // });
      }
    },
    // 筛选树节点
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },

    // 处理选择的引用模型
    addReferenceModel(isSelectRefGlobal, data) {
      if (isSelectRefGlobal) {
        this.globalHandleNodeClick(data)
      } else {
        this.handleNodeClick(data)
      }
    },
    // 模型管理树节点点击事件
    handleNodeClick(data) {
      console.log("局部树节点点击事件", data)
      if (this.jsonSchemaTool.isFolder(data)) {
        this.$nextTick(() => {
          this.$refs["tree"].setCurrentKey(this.currentNodeKey);
        });
        return;
      }
      this.currentNodeKey = data.key;
      this.$emit(
        "updateParentSchema",
        this.currentName,
        data,
        this.isArrayItems,
        this.popoverRef
      );
    },
    // 全局数据模型树节点点击事件
    globalHandleNodeClick(data) {
      console.log("全局树节点点击事件", data);
      if (this.jsonSchemaTool.isFolder(data)) {
        this.$nextTick(() => {
          this.$refs["tree"].setCurrentKey(this.currentNodeKey);
        });
        return;
      }
      this.currentNodeKey = data.key;
      this.$emit(
        "globalUpdateParentSchema",
        this.currentName,
        data,
        this.isArrayItems,
        this.popoverRef
      );
    },
    // 根据数据类型，初始化表单数据
    initForm(val) {
      console.log("根据数据类型，初始化表单数据");
      this.form = {
        type: !val ? this.returnType() : val,
        required:
          this.currentIndex == 1 &&
            this.jsonSchemaTool.isComplexType(this.currentSchema, 0)
            ? false
            : !this.parentSchema["required"]
              ? false
              : this.parentSchema["required"].includes(this.currentName),
        null_able: this.jsonSchemaTool.isNullAble(this.currentSchema),
        deprecated: this.currentSchema.deprecated
          ? this.currentSchema.deprecated
          : false, // 废弃
      };
      switch (this.form.type) {
        case "string":
          this.form = {
            ...this.form,
            isEnum: this.currentSchema.enum ? true : false, // 枚举
            enum: this.currentSchema.enum
              ? this.currentSchema["x-apifox-enum"]
              : [
                {
                  value: null, // 枚举值
                  name: null, // 名称
                  description: null, // 说明
                },
              ], // 枚举值
            isConst: this.currentSchema.const ? true : false, // 常量
            const: this.currentSchema.const ? this.currentSchema.const : null, // 常量值
            format: this.currentSchema.format
              ? this.currentSchema.format
              : null, // format 格式
            behavior: this.currentSchema.readOnly
              ? "R"
              : this.currentSchema.writeOnly
                ? "W"
                : "RW", // 行为
            minLength: this.currentSchema.minLength
              ? this.currentSchema.minLength
              : null, // 最小长度
            maxLength: this.currentSchema.maxLength
              ? this.currentSchema.maxLength
              : null, // 最大长度
            default: this.currentSchema.default
              ? this.currentSchema.default
              : null, // 默认值
            pattern: this.currentSchema.pattern
              ? this.currentSchema.pattern
              : null, // 正则表达式
            examples: this.currentSchema.examples
              ? this.currentSchema.examples
              : null, // 示例值
          };
          this.$forceUpdate();
          break;
        case "integer":
        case "number":
          this.form = {
            ...this.form,
            isEnum: this.currentSchema.enum ? true : false, // 枚举
            enum: this.currentSchema.enum
              ? this.currentSchema["x-apifox-enum"]
              : [
                {
                  value: null, // 枚举值
                  name: null, // 名称
                  description: null, // 说明
                },
              ], // 枚举值
            isConst: this.currentSchema.const ? true : false, // 常量
            const: this.currentSchema.const ? this.currentSchema.const : null, // 常量值
            format: this.currentSchema.format
              ? this.currentSchema.format
              : null, // format 格式
            behavior: this.currentSchema.readOnly
              ? "R"
              : this.currentSchema.writeOnly
                ? "W"
                : "RW", // 行为
            minimum: this.currentSchema.minimum
              ? this.currentSchema.minimum
              : null, // 最小值
            maximum: this.currentSchema.maximum
              ? this.currentSchema.maximum
              : null, // 最大值
            equal_to_minimum: this.currentSchema.exclusiveMinimum
              ? true
              : false, // 最小值是否排除
            equal_to_maximum: this.currentSchema.exclusiveMaximum
              ? true
              : false, // 最大值是否排除
            default: this.currentSchema.default
              ? this.currentSchema.default
              : null, // 默认值
            multipleOf: this.currentSchema.multipleOf
              ? this.currentSchema.multipleOf
              : null, // 倍数
            examples: this.currentSchema.examples
              ? this.currentSchema.examples
              : null, // 示例值
          };
          this.$forceUpdate();
          break;
        case "boolean":
          this.form = {
            ...this.form,
            default: this.currentSchema.default
              ? this.currentSchema.default
              : null, // 默认值
            behavior: this.currentSchema.readOnly
              ? "R"
              : this.currentSchema.writeOnly
                ? "W"
                : "RW", // 行为
          };
          this.$forceUpdate();
          break;
        case "array":
          this.form = {
            ...this.form,
            minItems: this.currentSchema.minItems
              ? this.currentSchema.minItems
              : null, // 最小元素个数
            maxItems: this.currentSchema.maxItems
              ? this.currentSchema.maxItems
              : null, // 最大元素个数
            uniqueItems: this.currentSchema.uniqueItems
              ? this.currentSchema.uniqueItems
              : null, // 所有元素必须唯一
            behavior: this.currentSchema.readOnly
              ? "R"
              : this.currentSchema.writeOnly
                ? "W"
                : "RW", // 行为
          };
          this.$forceUpdate();
          break;
        case "object":
          this.form = {
            ...this.form,
            minProperties: this.currentSchema.minProperties
              ? this.currentSchema.minProperties
              : null, // 最小属性数量
            maxProperties: this.currentSchema.maxProperties
              ? this.currentSchema.maxProperties
              : null, // 最大属性数量
            behavior: this.currentSchema.readOnly
              ? "R"
              : this.currentSchema.writeOnly
                ? "W"
                : "RW", // 行为
          };
          this.$forceUpdate();
          break;
        case "quote":
          return;

          if (this.jsonSchemaTool.isComplexType(this.currentSchema, 2)) {
            // 当前节点的类型为引用
            this.currentNodeKey = `apiSchema.${this.currentSchema["$ref"]
              .split("/")
              .pop()}`;
            this.$nextTick(() => {
              this.$refs["tree"].setCurrentKey(this.currentNodeKey);
            });
          }
          break;
        case "null":
        case "any":
        case "dictionary":
          break;
      }
      this.$emit("updatePopoverPos", this.popoverRef);
    },
    // 获取type类型
    returnType() {
      if (this.isQuote) {
        return "quote";
      } else {
        if (this.jsonSchemaTool.isComplexType(this.currentSchema, 0, 1, 2, 4)) {
          // 当前节点的类型为数组、对象、引用、组合模式之一
          if (this.jsonSchemaTool.isComplexType(this.currentSchema, 0)) {
            // 数组
            return "array";
          } else {
            return this.jsonSchemaTool.isComplexType(this.currentSchema, 2)
              ? "quote"
              : this.jsonSchemaTool.isComplexType(this.currentSchema, 4)
                ? "dictionary"
                : "object";
          }
        } else {
          // 当前节点的类型为基本类型
          return Array.isArray(this.currentSchema.type)
            ? this.currentSchema.type.length == 2
              ? this.currentSchema.type[0]
              : "any"
            : this.currentSchema.type;
        }
      }
    },
    // 当选择的数据类型发生变化后
    handleChangeDataType(val) {
      this.initForm(val);
      if (val == "quote") return;
      this.$emit(
        "updateSchemaStructure",
        val,
        this.isArrayItems,
        this.popoverRef,
        this.formRef
      );
    },
    // 当枚举的开关发生变化时
    handleChangeEnum(val) {
      if (val && this.form.isConst) {
        this.form.isConst = false;
      }
      this.form.const = null;
      this.form.enum = [
        {
          value: null, // 枚举值
          name: null, // 名称
          description: null, // 说明
        },
      ]; // 枚举值
    },
    // 当常量的开关发生变化后
    handleChangeConst(val) {
      if (val && this.form.isEnum) {
        this.form.isEnum = false;
      }
      this.form.const = null;
      this.form.enum = [
        {
          value: null, // 枚举值
          name: null, // 名称
          description: null, // 说明
        },
      ]; // 枚举值
    },
    // 新增一行枚举值
    addEnumRow(index, row) {
      // 当前输入框聚焦的时候，如若当前是最后一行，则新增一行枚举值
      if (index === this.form.enum.length - 1) {
        this.form.enum.push({
          value: null, // 枚举值
          name: null, // 名称
          description: null, // 说明
        });
      }
    },
    // 删除一行枚举值
    deleteEnumRow(index, row) {
      if (this.form.enum.length == 2) {
        this.form.enum.splice(index, 2);
        this.form.isEnum = false;
      } else {
        this.form.enum.splice(index, 1);
      }
    },
    // 当点击format格式菜单后，赋值给format,并关闭当前格式的popover
    handleFormatClick(item) {
      this.form.format = item.value;
      this.$forceUpdate();
      this.$nextTick(() => {
        this.$refs["formatRef"].doClose();
      });
      this.$emit("updateSchemaContent", "format", item.value);
    },
    // 输入的数据类型为number的变量发生变化时
    handleChange(val, sign) {
      this.form[sign] = val == null || val == "" ? null : Number(val);
    },
  },
};
</script>

<style lang="scss" scoped>
.data-type-form-container {
  width: 100%;
}

.menu-item {
  position: relative;
  height: 30px;

  .menu-item-text {
    height: 30px;
    line-height: 30px;
    color: #344054;
    font-size: 14px;
    box-sizing: border-box;
    cursor: pointer;
  }
}

.menu-item:hover {
  cursor: pointer;
  background-color: #f3f3f4;
  border-radius: 6px;}
</style>
<style scoped>
.data-type-form-container>>>.el-form-item {
  margin-bottom: 6px;
  text-align: left;
}

.data-type-form-container>>>.el-form-item__label {
  font-size: 12px;
  line-height: 25px;
  font-weight: normal;
}

.data-type-form-container>>>.el-form--label-top .el-form-item__label {
  padding: 0;
}

.string-text>>>.el-input__inner {
  color: #139659;
}

.integer-text>>>.el-input__inner,
.number-text>>>.el-input__inner {
  color: #ee46bc;
}

.boolean-text>>>.el-input__inner {
  color: #f37acf;
}

.array-text>>>.el-input__inner {
  color: #17b26a;
}

.object-text>>>.el-input__inner {
  color: #2e90fa;
}

.null-text>>>.el-input__inner,
.dictionary-text>>>.el-input__inner {
  color: #ef6820;
}

.any-text>>>.el-input__inner {
  color: #69affb;
}

.quote-text>>>.el-input__inner {
  color: #409eff;
}
</style>